<template>
  <div class="bill">
    <el-dialog
        title="记账"
        :visible.sync="$props.visible"
        width="600px"
        class="myDialog"
        :before-close="handleClose">
      <div class="billDia">
        <div class="billDia-left">
          <div class="billDia-leftTop" style="text-align: center">
            <span class="output" >
             <el-tooltip class="item" effect="light" content="支出" placement="top">
               <el-button :class="inputBut === 0 ? 'putBut-pressed' : 'putBut'"
                          style="border-radius: 50%;height: 100px;width: 100px" @click="billType(0)">
                  <el-image src="/img/icon/bill_output.png" style="height: 80%;width: 80%;margin: auto"></el-image>
               </el-button>
             </el-tooltip>
          </span>
            <span class="input" style="margin-left: 30px">
            <el-tooltip class="item" effect="light" content="收入" placement="top">
            <el-button :class="inputBut === 1 ? 'putBut-pressed' : 'putBut'"
                       style="border-radius: 50%;height: 100px;width: 100px" @click="billType(1)">
              <el-image src="/img/icon/bill_input.png" style="height: 80%;width: 80%;margin: auto"></el-image>
            </el-button>
            </el-tooltip>
          </span>
          </div>
          <div class="billDia-leftBottom" style="overflow-y: auto">
          <span v-for="(item,index) in type" :key="item.id"
                style="display: inline-block;height: 100px;width: 75px;text-align: center;margin-left: 10px;">
            <el-button :class="item.changeFlag ? 'putBut-pressed' : 'putBut'" :key="randomKey"
                       style="border-radius: 50%;height: 65px;width: 65px" @click="changeType(item)">
              <el-image :src="item.groupId"></el-image>
            </el-button>
            {{ item.name }}
            <br v-if="(index+1) % 3 === 0">
          </span>
          </div>
        </div>
        <div class="billDia-right">
          <div class="billDia-rightTop">
            <div class="l">
              <el-input style="width: 150px;" v-model="bill.remark" placeholder="备注"></el-input>
            </div>
            <div class="r">
            <el-input style="width: 100px;" v-model="bill.price" disabled></el-input>
            </div>
          </div>
          <div class="billDia-rightBottom">
          <span v-for="num in numberImg" :key="num.id">
            <el-button class="but" style="border-radius: 10%;height: 80px;width: 80px" @click="addPrice(num.value)">
              <el-image :src="num.src" style="height: 100%;width: 100%"></el-image>
            </el-button>
            <br v-if="num.id % 3 === 0">
          </span>
          </div>
        </div>
        <div class="billDia-leftBottom-button">
          <el-button @click="handleClose">取消</el-button>
          <el-button @click="submit" type="primary">提交</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "@/Axios/axios";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      numberImg: [
        {id: 1, src: "/img/number/number-1.png", value: '1'},
        {id: 2, src: "/img/number/number-2.png", value: '2'},
        {id: 3, src: "/img/number/number-3.png", value: '3'},
        {id: 4, src: "/img/number/number-4.png", value: '4'},
        {id: 5, src: "/img/number/number-5.png", value: '5'},
        {id: 6, src: "/img/number/number-6.png", value: '6'},
        {id: 7, src: "/img/number/number-7.png", value: '7'},
        {id: 8, src: "/img/number/number-8.png", value: '8'},
        {id: 9, src: "/img/number/number-9.png", value: '9'},
        {id: 10, src: "/img/number/number-d.png", value: '.'},
        {id: 11, src: "/img/number/number-0.png", value: '0'},
        {id: 12, src: "/img/number/number-x.png", value: 'x'},
      ],
      bill: {
        price: '0.00',
        remark: '',
        type: null,
        typeId: null,
        typeName: ''
      },
      inputBut: null,
      type: [],
      typeForm: {},
      randomKey: Math.random(),
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
      this.bill.price = '0.00';
      this.bill.remark = '';
      this.bill.type = null;
      this.bill.typeName = null;
      this.bill.typeId = null;
      this.type = [];
      this.inputBut = null;
    },
    addPrice(value) {
      let price = this.bill.price;
      if(price === '0.00')
      {price = '';
      this.bill.price = price;}
      if (value === 'x') {
        this.bill.price = price.substring(0, price.length - 1);
        return;
      }
      if (price === '' && value === '.') {
        this.bill.price = '0.';
        return;
      }
      if (price.indexOf('.') !== -1 && (price.length - price.indexOf('.') === 3 || value === '.')) {
        this.$message.info('最多只能有一个小数点,且最多输入两位小数哦!');
        return;
      }
      this.bill.price += value;
    },
    billType(type) {
      this.inputBut = type;
      this.bill.type = type;
      this.typeForm.type = type;
      this.selectType();
    },
    selectType() {
      axios.post('/bill/billTypeList', this.typeForm).then(res => {
        this.type = res.data;
        this.type.forEach(item => {
          item.changeFlag = false;
        });
      }).catch(() => {
      })
    },
    changeType(item) {
      let type = this.type;
      type.forEach(t => {
        t.changeFlag = t.id === item.id;
      });
      this.type = type;
      this.bill.typeId = item.id;
      this.bill.typeName = item.name;
      this.randomKey = Math.random();
    },
    submit() {
      if (this.bill.price === '') {
        this.$message.info('请输入金额后再提交哦！');
        return;
      }
      if (this.bill.type === null || this.bill.type === undefined) {
        this.$message.info('请选择收支类型后再提交哦！');
        return;
      }
      if (this.bill.typeId === null || this.bill.typeId === undefined) {
        this.$message.info('请选择明细类型后再提交哦！');
        return;
      }
      axios.post('/userBill/add', this.bill).then(res => {
        if (res.code === 200) {
          this.$message.success('提交成功！');
          this.handleClose();
          this.$parent.select();
          this.$parent.getDaysForMonth();
        }
      }).catch(() => {});
    }
  },
  mounted() {
    this.billType(0);
  }
}
</script>

<style scoped>
.billDia {
  width: 100%;
  display: flex;
}

.billDia-left {
  width: 50%;
}

.billDia-right {
  width: 50%;
  margin-left: 10px;
}

.billDia-leftTop {
  height: 30%;
}

.billDia-leftBottom {
  margin-bottom: 20px;
  height: 70%;
}

.billDia-rightTop {
  height: 20%;
}

.billDia-rightBottom {
  height: 80%;
}

.but {
  border-radius: 10%;
  height: 100px;
  width: 200px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0 5px 5px #999;
  margin: 0 5px 5px 0;
}

.but:active {
  transform: translateY(4px);
  box-shadow: 0 1px #666;
}

.putBut {
  border-radius: 10%;
  height: 100px;
  width: 200px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0 5px 5px #999;
  margin: 0 5px 5px 0;
}

.putBut-pressed {
  transform: translateY(4px);
  box-shadow: 0 1px #666;
  background-color: rgba(236, 245, 255);
  margin: 0 5px 5px 0;
}

.myDialog >>> .el-dialog__body {
  height: 400px !important;
}

.billDia-leftBottom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.myDiaTip >>> .el-dialog__body {
  padding: 5px 10px !important;
}

.myDialog >>> .el-dialog{
  height: 580px !important;
}

.billDia-rightTop > .l > .el-input >>> .el-input__inner  {
  border-radius:0 !important;
  border-right: 0 !important;
  outline: none !important;
}

.billDia-rightTop > .l > .el-input >>> .el-input__inner  :focus {
  outline: none !important;
}

.billDia-rightTop > .r > .el-input >>> .el-input__inner {
  border-radius:0 !important;
  border-left: 0 !important;
  text-align: right;
  background-color: #fff;
  color: #000;
}

.l,.r{
  display: inline-block;
}
</style>
